<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点名器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: black;
        }

        .box {
            text-align: center;
            margin: 500px auto;
            font-size: 50px;
            font-weight: 900;
            color: white;
        }

        .spans {
            display: inline-block;
        }

        .anniu {
            width: 200px;
            height: 100px;
            margin: 0 auto;
        }

        #start,
        #stop {
            /* display: inline-block; */
            width: 80px;
            height: 50px;
            background-color: pink;
            border-radius: 8px;
        }

        #start:hover {
            background-color: rgb(49, 148, 44);
            color: white;
        }

        #stop:hover {
            background-color: red;
            color: white;
        }
    </style>
</head>

<body>
    <div class="box">
        <span id="spans">张三</span>
        <div class="anniu">
            <button id="start">开始</button>
            <button id="stop">停止</button>
        </div>
    </div>


    <script>
        const start = document.querySelector('#start')
        const stop = document.querySelector('#stop')
        let person = [
            '王五', '张三', '刘明', '小亮', '王丽', '李白', '杜甫', '白居易', '王勃', '王维'
        ]

        function dianming() {
            let random = Math.floor(Math.random() * person.length)
            let spans = document.querySelector('#spans')
            spans.innerHTML = person[random]
            return random
        }

        let filar = null
        start.onclick = function () {
            if (!filar) {
                filar = setInterval(() => {
                    dianming()
                }, '10')
            }
            if (person.length === 1) {
                start.disabled = true
                stop.disabled = true
            }
        }

        stop.onclick = function () {
            clearInterval(filar)
            filar = null
            if (person != '') {
                console.log(person.splice(dianming(), 1));
                //dianming()返回得到的是数组的下标
                // console.log(dianming());
            }
        }
    </script>
</body>

</html>